<template>
    <div class="order-main all-main">
        <section class="order-main-header" :class="cationModal?'toast-modal':''">
             <mt-header title="">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
             <mt-button v-if="active=='tab-container1'"  slot="right" @click="cationModalVish('1')"><img class="img" src="../../assets/code.png"></mt-button>
            </mt-header>
        </section>
        <div v-if="!cationModal" class="container">
            <div class="nav">
                <mt-button  v-bind:class="active=='tab-container1'?'active':''" size="small" @click="changeActive('tab-container1')">全部委托</mt-button>
                <mt-button v-bind:class="active=='tab-container2'?'active':''" size="small" @click="changeActive('tab-container2')">历史委托</mt-button>
            </div>
             <div class="page-tab-container" >
                <mt-tab-container class="page-tabbar-tab-container content" v-model="active"  value="tab-container1">
                    <mt-tab-container-item id="tab-container1" >
                        <div v-if="entrustList.length>0">
                            <div
                             v-infinite-scroll="loadMore"
                            infinite-scroll-disabled="loading"
                            infinite-scroll-distance="10"  class="newsList">
                            <div class="order-table" v-for="(orderData, i) in entrustList" v-bind:key="i" >
                                    <div class="order-header">
                                    <div class="flex-between ">
                                        <span v-if="orderData.fentrustType==1" class="order-sell">卖出{{symbolList.fShortName}}</span>
                                        <span v-if="orderData.fentrustType==0" class="order-buy">买入{{symbolList.fShortName}}</span>
                                         <p style="font-size:20px;">{{ timestampToTime(orderData.fcreateTime)}}</p>
                                         <button v-on:click="cancelOrder(orderData.fid)" class="upper submit start" v-if="orderData.fstatus==1 ||orderData.fstatus==2"   id="submit">撤单</button>
                                         <button v-on:click="cancelOrder(orderData.fid)" class="upper submit " style="background:rgba(33, 61, 102, 1)" v-if="orderData.fstatus==4"  id="submit">已撤单</button>
                                    </div>
                                </div>
                                <div @click="getDet(orderData.fid,0)">
                                    <div class="order-content flex-between">
                                        <div class="flex-center">
                                        <div class="all-amount">
                                            <span>委托价({{symbolList.group}})</span>
                                            <span class="color">{{filterDecimals(orderData.fprize)}}</span>
                                        </div>
                                        <div class="all-amount">
                                            <span>成交量({{symbolList.fShortName}})</span>
                                            <span class="color">{{filterDecimals(orderData.fcount-orderData.fleftCount)}}</span>
                                        </div>
                                        <div class="all-amount">
                                            <span>成交总额({{symbolList.group}})</span>
                                            <span class="color">{{orderData.fsuccessAmount}}</span>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="order-content flex-between">
                                        <div class="flex-center">
                                        <div class="all-amount">
                                            <span>成交均价({{symbolList.group}})</span>
                                            <span class="color">{{filterDecimals(orderData.dealPrice?orderData.dealPrice:0)}}</span>
                                        </div>
                                        <div class="all-amount">
                                            <span>委托量({{symbolList.fShortName}})</span>
                                            <span class="color">{{orderData.fcount}}</span>
                                        </div>
                                            <div class="all-amount">
                                            <span>订单类型</span>
                                            <span class="color" v-if="orderData.tradeType==0">普通</span>
                                                <span class="color" v-if="orderData.tradeType==1"> 共识</span>
                                                <span class="color" v-if="orderData.tradeType==2"> 共识</span>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                                <div class="loading-box tc" v-if="isLoading">
                                            <mt-spinner type="snake" class="loading-more"></mt-spinner>
                                            <span class="loading-more-txt">加载中...</span>
                                </div>
                                <div class="no-more" v-if="noMore">没有更多了~</div>
                        </div>
                        <div v-if="entrustList.length==0" class="data-img">
                            <img src="../../assets/coin-code.png">
                            <p>暂无记录</p>
                        </div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="tab-container2">
                          <div v-if="entrustListLog.length>0" style="">
                               <div
                             v-infinite-scroll="loadMoreData"
                            infinite-scroll-disabled="loading"
                            infinite-scroll-distance="10"  class="news">
                            <div class="order-table" v-for="(orderData, i) in entrustListLog" v-bind:key="i" >
                                <div class="order-header">
                                    <div class="flex-between ">
                                     <span v-if="orderData.fentrustType==1" class="order-sell">卖出{{symbolList.fShortName}}</span>
                                        <span v-if="orderData.fentrustType==0" class="order-buy">买入{{symbolList.fShortName}}</span>
                                         <p style="font-size:20px;">{{ timestampToTime(orderData.fcreateTime)}}</p>
                                        <button v-if="orderData.fstatus==4"  class="upper submit " style="background:rgba(33, 61, 102, 1)"  id="submit">已撤销</button>
                                        <button v-if="orderData.fstatus==3"  class="upper submit start"   id="submit">已成交</button>
                                    </div>
                                </div>
                                <div @click="getDet(orderData.fid,1)">
                                    <div class="order-content flex-between">
                                        <div class="flex-center">
                                        <div class="all-amount">
                                            <span>委托价({{symbolList.group}})</span>
                                            <span class="color">{{filterDecimals(orderData.fprize)}}</span>
                                        </div>
                                        <div class="all-amount">
                                            <span>成交量({{symbolList.fShortName}})</span>
                                            <span class="color">{{orderData.fcount-orderData.fleftCount}}</span>
                                        </div>
                                        <div class="all-amount">
                                            <span>成交总额({{symbolList.group}})</span>
                                            <span class="color">{{orderData.fsuccessAmount}}</span>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="order-content flex-between">
                                        <div class="flex-center">
                                        <div class="all-amount">
                                            <span>成交均价({{symbolList.group}})</span>
                                            <span class="color">{{filterDecimals(orderData.dealPrice)}}</span>
                                        </div>
                                        <div class="all-amount">
                                            <span>委托量({{symbolList.fShortName}})</span>
                                            <span class="color">{{orderData.fcount-orderData.fleftCount}}</span>
                                        </div>
                                            <div class="all-amount">
                                            <span>订单类型</span>
                                            <span class="color" v-if="orderData.tradeType==0">普通</span>
                                                <span class="color" v-if="orderData.tradeType==1"> 共识</span>
                                                <span class="color" v-if="orderData.tradeType==2"> 共识</span>
                                        </div>
                                        </div>
                                    </div>
                                 </div>
                            </div>
                              <div class="loading-box tc" v-if="isLoading1">
                                            <mt-spinner type="snake" class="loading-more"></mt-spinner>
                                            <span class="loading-more-txt">加载中...</span>
                                </div>
                                <div class="no-more" v-if="noMore1">没有更多了~</div>
                            </div>
                        </div>
                         <div v-if="entrustListLog.length==0" class="data-img">
                            <img src="../../assets/coin-code.png">
                            <p>暂无记录</p>
                        </div>
                    </mt-tab-container-item>
                </mt-tab-container>
            </div>
        </div>
        <section class="el-toast" v-if="cationModal">
              <div class="el-modal" v-clickOut="clickOut">
                    <div class="all-load">
                          <p class="total-type">委托类型</p>
                        <div class="flex-between total-flex">
                            <div class="total-border"   :class="toastType==2?'toast-type':''" @click="toastTypeChange(2)">全部</div>
                            <div class="total-border" :class="toastType==0?'toast-type':''" @click="toastTypeChange(0)">买入{{symbolList.fShortName}}</div>
                            <div class="total-border" :class="toastType==1?'toast-type':''" @click="toastTypeChange(1)">卖出{{symbolList.fShortName}}</div>
                        </div>
                    </div>
                     <div class="all-load">
                          <p class="total-type">订单状态</p>
                        <div class="flex-between total-flex">
                            <div class="total-border" :class="toastStatus==0?'toast-type':''" @click="toastStatusChange(0)">部分成交</div>
                            <div class="total-border" :class="toastStatus==1?'toast-type':''" @click="toastStatusChange(1)">已撤单</div>
                            <div class="total-border" :class="toastStatus==2?'toast-type':''" @click="toastStatusChange(2)">全部成交</div>
                        </div>
                    </div>
                     <div class="all-load">
                          <p class="total-type">订单类型</p>
                        <div class="flex-between total-flex">
                            <div class="total-border" :class="toastOrder==1?'toast-type':''" @click="toastOrderChange(1)">共识</div>
                            <div class="total-border" :class="toastOrder==0?'toast-type':''" @click="toastOrderChange(0)">普通</div>
                        </div>
                    </div>
                   <div class="flex-between total-flex">
                        <button class="cancel-btn" @click="reset()">重置</button>
                        <button class="total-btn" @click="security()">确定</button>
                   </div>
              </div>
        </section>
        <div style="height:120px"></div>
              <div class="v-modal" style="z-index: 2000;" v-if="cationModal"></div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import { MessageBox } from 'mint-ui';
   import {mapMutations, mapActions} from 'vuex';
export default {
    name:'myOrder',
    components: {},
    data(){
         return {
             list:[1,2,3,4,5,6],
             orderTabs:1, active: "tab-container1",
             entrustList:[],
             historyOrdesList:[],
             fid:'',
             entrustListLog:[],
             symbol:'',
             symbolList:'',
             cationModal:false,
             toastType:2,
             toastStatus:null,
             toastOrder:null,
              isLoading:false,
             noMore:false,
                isLoading1:false,
             noMore1:false,
             page:2,
             page1:2
         }
    },
    mounted() {
        this.getOtcList();
    },
    methods: {
        loadMore(){
                    if(this.noMore){
                    return ;
                }
                 this.isLoading = true;
                this.noMore = false;
               let self=this;
              let param={
                  coinId:this.$route.query.symbol,
                  stauts:'1,2',
                  page:this.page,
                  pageSize:20
              }
            this.$http.post('/v2/market/newMarketRefresh',param)
                .then(function(res) {
                    if(res.data.code==200){
                        if(res.data.data.length==0){
                            self.isLoading = false;
                            self.noMore = true;
                               return ;
                    }
                     res.data.data.forEach(function(item){
                                 self.entrustList.push(item);
                      })
                    if(self.toastType!=2){
                         self.entrustList=self.entrustList.filter(item=>{
                    return   item.fentrustType==self.toastType
                    })
                    }
                    if(self.toastOrder){
                    self.entrustList=self.entrustList.filter(item=>{
                     return  item.tradeType==self.toastOrder
                    })
                    }
                     self.page++;
                        self.isLoading = false;
                        self.noMore = false;
                    }else if(res.data.code==401){
                        self.$router.push("/login")
                    }
                })
        },
        loadMoreData(){
              let param={
                  coinId:this.$route.query.symbol,
                  stauts:'3,4',
                  page:this.page1,
                  pageSize:20
              }
              if(this.noMore1){
                    return ;
                }
                this.isLoading1 = true;
                this.noMore1 = false;
                   let self=this;
            this.$http.post('/v2/market/newMarketRefresh',param)
                .then(function(res) {
                    if(res.data.code==200){
                     if(res.data.data.length==0){
                            self.isLoading1 = false;
                            self.noMore1 = true;
                               return ;
                    }
                    res.data.data.forEach(function(item){
                                self.entrustListLog.push(item);
                      })
                        self.page1++;
                        self.isLoading1 = false;
                        self.noMore1 = false;
                    }else if(res.data.code==401){
                        self.$router.push("/login")
                    }
                })
        },
        getDet(fid,type){
             this.SET_HISTORY({history:type});
             this.$router.push({
            path: `/trade/details${'?id='+fid+'&symbol='+this.$route.query.symbol}`
            })
        },
          ...mapMutations([
                'SET_REPORT','SET_HISTORY'
            ]),
          filterDecimals(res){
              if(!res){
                  return 0
              }
            return res.toFixed(4);
        },
        reset(){
             this.toastType=2;
             this.toastStatus=null;
             this.toastOrder=null
        },
        security(){
            let status,type;
            if(this.toastStatus==0){
            status=2;
            }else if(this.toastStatus==1){
            status=4;
            }else if(this.toastStatus==2){
            status=3;
            }else{
                 status='1,2';
            }
            this.refreshReportUser(this.$route.query.symbol,status);
            this.cationModal=false;
        },
        toastTypeChange(val){
            this.toastType=val;
        },
        toastStatusChange(val){
            this.toastStatus=val;
        },
        toastOrderChange(val){
        this.toastOrder=val;    
        },
         clickOut(){
                      this.cationModal=false;
          },
        cationModalVish(even){
             this.cationModal= !this.cationModal;
        },
         cancelOrder(order){
            this.$http.post('/v2/market/cancelEntrust', { id: order })
                .then(res=>{
                     this.refreshReportUser(this.$route.query.symbol,'1,2');
                })
        },
         getOtcList(){this.$http.post('/v2/market/allcoins',).then((res)=>{
                let tickers = res.data;
                 let coinGroup = {}
                    let param = location.hash.match(new RegExp(".*" + 'symbol' + "=([^\&]*)(\&?)", "i"));
                    let symbol = param && !isNaN(param[1]) ? param[1] : 0;
                    let current = null;
                    for (let i = 0; i < tickers.length; i++) {
                        let ticker = tickers[i]
                        if (coinGroup[ticker.group] === undefined) {
                            coinGroup[ticker.group] = []
                        }
                        coinGroup[ticker.group].push(ticker);
                        // console.log(coinGroup[ticker.group].push(ticker), "CCCCCCCCCCCCCC")
                        if (symbol && ticker.fid == symbol) {
                            current = ticker
                        }
                    }
                    let newGroup = this.objKeySort(coinGroup)
                    if (!current) {
                        for (let group in newGroup) {
                            current = newGroup[group][0]
                            break;
                        }
                    }
                    this.symbolList=current;
                   this.symbol=current;
             if(this.$store.state.history==1){
                this.active= "tab-container2";
                this.historyRefreshUser(current.fid)
            }
           this.refreshReportUser(this.$route.query.symbol,'1,2');
             })
    },
                objKeySort(obj) {
            var newkey = Object.keys(obj).sort();
            var newObj = {};
            for (var i = 0; i < newkey.length; i++) {
                newObj[newkey[i]] = obj[newkey[i]];
            }
            return newObj;
        },
        refreshReportUser(symbol,status){
              let self=this;
              let param={
                  coinId:symbol,
                  stauts:status,
                  page:1,
                  pageSize:20
              }
            this.$http.post('/v2/market/newMarketRefresh',param)
                .then(function(res) {
                     if(res.data.code==200){
                    self.entrustList=res.data.data;
                    if(self.toastType!=2){
                         self.entrustList=self.entrustList.filter(item=>{
                    return   item.fentrustType==self.toastType
                    })
                    }
                    if(self.toastOrder){
                    self.entrustList=self.entrustList.filter(item=>{
                     return  item.tradeType==self.toastOrder
                    })
                    }
                     }else if(res.data.code==401){
                         self.$router.push("/login")
                     }
                })
        },
        historyRefreshUser(symbol){
              let self=this;
              let param={
                  coinId:symbol,
                  stauts:'3,4',
                  page:1,
                  pageSize:20
              }
            this.$http.post('/v2/market/newMarketRefresh',param)
                .then(function(res) {
                   self.entrustListLog=res.data.data;
                })
        },
        tabOrder(data){
            this.orderTabs=data
        },
         changeActive(id){
                this.active = id;
                if(this.active=="tab-container1"){
                    this.page1=1;
                    this.refreshReportUser(this.$route.query.symbol,'1,2');
                }else  if(this.active=="tab-container2"){
                    this.page=1;
                    this.historyRefreshUser(this.symbolList.fid);
                }
            },
            handleClose(){
                this.$router.go(-1);
            },
                  timestampToTime (cjsj) {
        var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = (date.getMinutes()< 10 ?'0'+date.getMinutes():date.getMinutes())+ ':'
        var s = date.getSeconds()
        return Y+M+D+h+m+s
    },
    },
      directives : {
                clickOut: {
                    bind: function(el, binding) {
                        let  self=this;
                    function handler(e) {
                            if(e.target.className=="v-modal"){
                                this.cationModal=false
                            }
                        if (el.contains(e.target)){
                            return false
                    }
                     if(e.target.className=="img"){
                                return false
                            }
                    if (binding.expression) {
                        binding.value()
                    }
                    }
                    el.handler = handler
                    document.addEventListener('click', el.handler)
                    },
                    unbind: function(el) {
                    document.removeEventListener('click', el.handler)
                    }    
                }
        },
}
</script>
<style lang="less" scoped>
.order-main .sell{
width: 50%;
height: 100px;
line-height: 100px;
text-align: center;
}
.order-main-header{
    display: flex;
    flex-direction: row;
    height: 100px;
}
.color{
    color: rgba(224, 224, 249, 1);
}
.order-sell{
    color: #F36D7D;
    font-size:32px;
}
.order-buy {
    color: #51D6AD;
    font-size:32px;
}
.all-amount{
     display: flex;
    flex-direction: column;
    height: 90px;
    text-align: center;
}
.order-content .all-amount:nth-child(1){
    width: 30%;
}
.order-content .all-amount:nth-child(2){
    width: 40%;
}
.order-content .all-amount:nth-child(3){
    width: 30%;
}
.all-amount span:nth-child(1){
    height: 60px;
    line-height: 60px;
}
.order-main-header header{
    width: 100%;
}

.page-tab-container{
    height: 100%;
}
.data-img{
        min-height: 850px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    p{
        color: #E0E0F9;
    }
}
.data-img img{
     width: 120px;
    height: 120px;
}
.order-content .left{
    color: #E0E0F9
}
.order-header{
    height: 80px;
    line-height: 80px;
    border-bottom:1px solid #161736;
    color: #ADADD8;
}
.all-main.order-header p{
  margin-left: -60px
}
.rect{
    height:10px;
    background:rgba(244,244,244,1);
}
.order-content{
    padding-top: 20px;
    color: #ADADD8;
    font-size: 24px;
}
.order-main .left p{
    height: 40px;
    font-size: 24px;
}
.nav{
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid rgba(34,34,64,1);
}
 .loading-box{
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center
    }
.black{
    color: #E0E0F9;
    font-weight:600;
    font-size:32px;
}
.flex-center{
    display: flex;
   align-self: center;
}
.all-main .flex-center{
width: 100%;
}
.flex-between{
      display: flex;
        justify-content:space-between
    }
    .end{
        background: #8c9fad
    }
    .start{
          background:#5298FE;
          border-radius:6px;
    }
    .submit {
    width: 120px;
    height: 48px;
    font-size: 28px;
    line-height: 48px;
    font-weight: 700;
    color: #fff;
    border-radius:5px;
}
.order-header>div{
    align-items: center;
}
.order-table{
    padding: 20px 30px 20px 30px;
    background: #222240;
    position: relative;
    margin: 20px;
}
.tabs .img{
    width: 40px;
    height: 40px;
    position: relative;
    right: 20px;
    top:30px;
}
.order-main .buy{
width: 50%;
height: 100px;
line-height: 100px;
text-align: center;
}
.order-main .buy span{
text-align: center;
width: 50%;
line-height: 100px;
height: 90%;
}
.flex-content{
      display: -ms-flexbox;
    display: flex;
    justify-content: center;
}
.order-main .sell span{
width: 50%;
height: 90%;
line-height: 100px;
}
.tab-content{
    width: 80%;
    margin: 0 auto;
    font-size: 32px;
    font-weight:500;
}
.order-main .tab{
display: flex;
background:rgba(255,255,255,1);
height: 100px;
border-bottom:1px solid #161736
}
.order-main .active{
color: #3381FF;
}
.mint-header{
    height: 100px;
    font-size: 32px;
    background-color: #161736;
    color: #E0E0F9
}


.el-toast {
    .toast-type{
        background:rgba(82, 152, 241, 0.1);
    border:2px solid rgba(82, 152, 241, 1) !important;
    }
    .flex-between{
      display: flex;
        justify-content:start
    }
       .all-load{
        height: 200px;
        border-top: 1px solid rgba(34,34,64,1);
    }
    .el-modal{
        color: rgba(173, 173, 216, 1);
    }
    height: 750px;
    margin-top: 100px;
    position: fixed;
    background: rgba(22, 23, 54, 1);
    width: 100%;
    text-align: center;
    bottom: 0;
    top: 0%;
    z-index: 10000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    .total-type{
        height: 120px;
        line-height: 120px;
        text-align: left;
        font-size:28px;
        padding-left: 30px;
    }
    .total-border{
        width:148px;
        height:48px;
        border-radius:24px;
        border:2px solid rgba(224, 224, 249, 1);
        line-height: 48px;
        color: rgba(224, 224, 249, 1);
        margin-right: 40px;
    }
    .total-flex{
           padding-left: 30px;
        padding-right: 30px;
    }
    .cancel-btn{
        width:204px;
        height:72px;
        background:rgba(134,134,192,0.5);
        border-radius:4px;
        font-size:28px;
         color: rgba(224, 224, 249, 1);
        border:2px solid rgba(46,46,89,1);
        margin-top: 30px;
        margin-right: 30px;
    }
    .total-btn{
        margin-top: 30px;
        width:466px;
        height:72px;
        background:rgba(82,152,241,0.5);
        border-radius:4px;
         color: rgba(224, 224, 249, 1);
        font-size:28px;
        border:2px solid rgba(82,152,241,1);
    }
}
.toast-modal{
    background: #161736;
}
.no-more {
    text-align: center;
    color: #e0e0f9;
}
</style>